<template>
	<view>
		<!-- 底部弹出 -->
		<gui-popup ref="guipopup3" position="bottom">
			<view>
				<view class="gui-relative" style="height: 600rpx;width: 100%;background-color: #fff;">
					<view class="row_xx gui-flex gui-space-between">
						<view class="txt c666" @click="close">
							取消
						</view>
						<view class="con_txt" @click="confirm">
							确认
						</view>
					</view>
					<picker-view v-if="visible" :value="value" :indicator-style="indicatorStyle" :mask-style="maskStyle"
						@change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in professionData" :key="index">{{item.oneName}}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in professionData[professionIndex[0]].listGrade"
								:key="index">{{item.twoName}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<!-- iphone 底部适配 -->
				<gui-iphone-bottom :customClass="['gui-bg-white', 'gui-dark-bg-level-3']"></gui-iphone-bottom>
			</view>
		</gui-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'

	const emit = defineEmits(['change', 'confirm'])

	const props = defineProps({
		professionData: {
			type: Array,
			default: []
		}
	})

	const indicatorStyle = ref(`height: 50px;`);
	// #ifdef MP-KUAISHOU
	const maskStyle = ref("padding:10px 0");
	// #endif
	// #ifndef MP-KUAISHOU
	const maskStyle = ref("");
	// #endif

	const value = ref([0, 0])

	const professionIndex = ref([0, 0])
	const optionIndex = ref(0)

	const guipopup3 = ref(null)

	const visible = ref(false)

	const open = (index = 0, industryId = '') => {
		visible.value = true;
		optionIndex.value = index;
		console.log(industryId);
		/* if(industryId) {
			props.professionData.forEach((item, index) => {
				item.listGrade.some((cItem, cIndex) => {
					if(cItem.id == industryId) {
						professionIndex.value[0] = index;
						professionIndex.value[1] = cIndex;
						setTimeout(() => {
							value.value = [index, cIndex];
						}, 100)
						return true;
					}
				})
			})
		} */
		console.log(props.professionData);
		guipopup3.value.open();
	}

	const close = () => {
		guipopup3.value.close();
	}

	const bindChange = (e) => {
		console.log(e);
		const val = e.detail.value
		professionIndex.value[0] = val[0];
		if(value.value[0] != val[0]) {// 第一列改变
			value.value[0] = val[0];
			value.value[1] = 0;
			professionIndex.value[1] = 0;
		}else {
			value.value[1] = val[1];
			professionIndex.value[1] = val[1];
		}
		let indexData = Object.assign(optionIndex, {})
		emit('confirm', {
			index: indexData.value,
			value: val
		})
	}

	const confirm = () => {
		let val = JSON.stringify(professionIndex.value)
		let indexData = Object.assign(optionIndex, {})
		emit('confirm', {
			index: indexData.value,
			value: JSON.parse(val)
		})
		close()
	}

	// 抛出函数
	defineExpose({
		open,
		close
	})
</script>

<style>
	.picker-view {
		width: 750rpx;
		height: 520rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.row_xx {
		padding: 0 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}

	.con_txt {
		color: #00aa00;
	}
</style>